@extends('layouts.default')

@section('title')
    监控面板<span style="font-size: 14px;color:gray;padding-left: 10px">(绿色安全，黄色警告，红色危险)</span>
@stop

@section('content')
<div class="row">
    <div class="main-box">
        <div class="main-box-body clearfix col-lg-12">
            <form role="form" method="get">
                <div class="btn-group" data-toggle="buttons" id="groups">
                    <label class="btn btn-primary active">
                    <input type="radio" name="options" id="option"> 全部
                    </label>
                    @if( isset($deviceList['group']) && !empty($deviceList['group']) )
                        @foreach ($deviceList['group'] as $key => $name)
                            <label class="btn btn-primary">
                                <input type="radio" name="options" id="option{{ $key }}"> {{ $name }}
                            </label>
                        @endforeach
                    @endif
                </div>
            </form>
        </div>
        <div class="col-md-12 main-box-body clearfix">
            <div class="social-box-wrapper" id="main-page-box">
                @if( !empty( $deviceList['data'] ) )
                    @foreach ($deviceList['data'] as $dId => $data)
                        @if($data['val'] >= 140)
                        <div class="social-box col-md-2 col-sm-1 btn-danger {{ isset($data['groupName'])?$data['groupName']:'' }} dev-view md-trigger show-block" id="dev{{$dId}}" title="用户电话" data-content='{{$data['mobiles']}}' data-modal="modal-log" data-trigger="hover" data-toggle="popover"  data-html="true">
                        @elseif($data['val'] >= 100)
                        <div class="social-box col-md-2 col-sm-1 btn-warning {{ isset($data['groupName'])?$data['groupName']:'' }} dev-view md-trigger show-block" id="dev{{$dId}}" title="用户电话" data-content='{{$data['mobiles']}}' data-modal="modal-log" data-trigger="hover" data-toggle="popover"  data-html="true">
                        @else
                        <div class="social-box col-md-2 col-sm-1 btn-success {{ isset($data['groupName'])?$data['groupName']:'' }} dev-view md-trigger show-block" id="dev{{$dId}}" title="用户电话" data-content="{{$data['mobiles']}}" data-modal="modal-log" data-trigger="hover" data-toggle="popover"  data-html="true">
                        @endif
                            <i class="fa fa-tint"></i>
                            <div class="clearfix">
                                <span class="social-action">浓度{{ $data['val'] }}ppm</span>
                            </div>
                            <span class="social-name">设备名称:{{ $data['title'] }}</span>
                            @if( count($data['address']) == 3 )
                                <span class="social-name">{{ $data['address'][0].'栋'.$data['address'][1].'单元'.$data['address'][2].'室' }}</span>
                            @else
                                <span class="social-name">{{ $data['address'][0] }}</span>
                            @endif

                        </div>
                    @endforeach
                @else
                    <p>您暂时没有可供监控的设备！</p>
                @endif
            </div>
        </div>
    </div>
</div>

<!-- 历史温度 -->
<div class="md-modal md-effect-11" id="modal-log">
    <div class="md-content">
        <div class="modal-header">
            <button class="md-close close">&times;</button>
            <h4 class="modal-title">历史浓度走势(近期1-10条数据)</h4>
        </div>
        <div class="modal-body">
            <div id="graph-flot-points" style="height: 400px; width: 600px; padding: 0px; position: relative;"></div>
        </div>
    </div>
</div>

@stop

@section('js')
    <script language="javascript" type="text/javascript" src="{{ asset('/js/flot/excanvas.min.js') }}"></script>
    <script src="{{ asset('/js/flot/jquery.flot.js') }}"></script>

    <script type="text/javascript">

    jQuery(document).ready(function() {
        
        $('#groups label').on('click', function(){

            var val = $.trim($(this).text());

            if(val == "全部")
            {
                return $('#main-page-box > div').fadeIn();
            }

            $('#main-page-box > div').hide()
            $('.'+val).fadeIn();

        })

        // graph with points
        $('.dev-view').on('click', function(){


            $('#graph-flot-points').html('<div style="position:absolute;left:50%;top:50%;font-size:20px;margin-left:-30px"><i class="fa-li fa fa-spinner fa-spin"></i>加载中...</div>');

            
            //获取设备ID
            var devId = $.trim($(this).attr('id').replace('dev', ''));

            var uri = "{{ url('devicePoint') }}";

            $.post(uri, { id : devId }, function(data){
                
                var datas = [];
                $.each(data, function(n, value) {
             　　　　datas[n] = [n, value];
                });
                
                if ($('#graph-flot-points').length) {
// datas=[[0, 90], [1, 50], [13.5, 90]];
                    var likes = datas;

                    var plot = $.plot($("#graph-flot-points"),
                           [ { data: likes, label: "ppm"} ], {
                               series: {
                                   lines: { 
                                       show: true,
                                        lineWidth: 2,
                                        fill: true, 
                                        fillColor: { colors: [ { opacity: 0.3 }, { opacity: 0.3 } ] }
                                    },
                                   points: { show: true, 
                                             lineWidth: 2 
                                         },
                                   shadowSize: 0
                               },
                               grid: { hoverable: true, 
                                       clickable: true, 
                                       tickColor: "#f9f9f9",
                                       borderWidth: 0
                                     },
                               colors: ["#1abc9c"],
                                // xaxis: {ticks:6, tickDecimals: 0},
                                xaxis: {
                                    ticks: [[0, '0:00'],[1, '1:00'],[2, '2:00'],[3, '3:00'],[4, '4:00'],[5, '5:00'],[6, '6:00'],[7, '7:00'],[8, '8:00'],[9, '9:00'],[10, '10:00'],[11, '11:00'],[12, '12:00'],[13, '13:00']],
                                    tickFormatter: function(axis) {
                                        return axis.toString();
                                    }
                                }
                                // xaxis: {
                                //     mode: "time",  
                                //     timeformat: "%H:%M:%S",  
                                //     tickFormatter: function (val, axis) {  
                                //         var d = new Date(val);  
                                //         return d.toLocaleTimeString();  
                                // }  
                                // yaxis: {ticks:3, tickDecimals: 0},
                             });

                    function showTooltip(x, y, contents) {
                        $('<div id="tooltip">' + contents + '</div>').css( {
                            position: 'absolute',
                            'z-index': '99999',
                            display: 'none',
                            top: y + 5,
                            left: x + 5,
                            border: '1px solid #1abc9c',
                            'box-shadow': '2px 2px 5px #000',
                            padding: '5px',
                            color: '#fff',
                            'background-color': '#1abc9c',
                            opacity: 0.80
                        }).appendTo("body").fadeIn(800);
                    }

                    var previousPoint = null;
                    $("#graph-flot-points").bind("plothover", function (event, pos, item) {
                        $("#x").text(pos.x.toFixed(2));
                        $("#y").text(pos.y.toFixed(2));

                            if (item) {
                                if (previousPoint != item.dataIndex) {
                                    previousPoint = item.dataIndex;

                                    $("#tooltip").remove();
                                    var x = item.datapoint[0],
                                        y = item.datapoint[1].toFixed(2);

                                    showTooltip(item.pageX, item.pageY,
                                                " 时间/浓度: " + x + ":00 / " + y + item.series.label);
                                }
                            }
                            else {
                                $("#tooltip").remove();
                                previousPoint = null;
                            }
                    });
                }
                
            });
        })
        //用户详情
        $('[data-toggle="popover"]').popover()
        $('.social-box').hover(function(){

        })

    });

    </script>

@stop